import React from 'react'
import Table from 'components/table'

export default {
  key: 'table',
  name: 'Table 表格',
  author: '张然',
  description: '基于::antd::的::Table::改的新样式。',
  isExampleFull: true,
  api: [
    {
      title: 'API',
      data: [],
      description: ''
    }
  ],
  example: [
    {
      title: '基础用法',
      description: '参数跟::antd::的::Table::一致。',
      state: {
        data: [{
          name: '王老爷子', remark: '每十个北京人就有一个是于谦的父亲，听相声的都是于谦的父亲', title: '武术家', age: 3
        }, {
          name: '冷面杀手', remark: '又称朝鲜冷面杀手', title: '武侠', age: 30
        }, {
          name: '爱新觉罗·筐', remark: '八大铁帽子王之世袭绿帽子王', title: '宦官之后', age: 88
        }, {
          name: '于鬻菊', remark: '遇到海盗被抢300万，之后让海盗开了500万的发票', title: '军事家', age: 43
        }, {
          name: '于德刚', remark: '家中排行第八人称北京八爷，简称京八', title: '北京八爷', age: 60
        }, {
          name: '朴人猛', remark: '陛下说谢谢', title: '韩国王子', age: 53
        }],
        selectedRowKeys: []
      },
      getMethod: context => {
        return {
          onSelectChange: selectedRowKeys => {
            context.setState({ selectedRowKeys });
          }
        }
      },
      getContent: context => {
        const { data, selectedRowKeys } = context.state;
        const columns = [{
          dataIndex: 'index', title: '序号', render: (text, record, index) => index + 1, width: 72
        }, {
          dataIndex: 'name', title: '姓名'
        }, {
          dataIndex: 'age', title: '年龄', sorter: (a, b) => a.age - b.age
        }, {
          dataIndex: 'title', title: '职位', filterDropdown: <div>筛选菜单</div>
        }];
        const rowSelection = {
          selectedRowKeys,
          onChange: context.onSelectChange,
        };
        return (
          <div>
            <Table
              columns={columns}
              dataSource={data}
              expandedRowRender={record => <p>{record.remark}</p>}
              rowSelection={rowSelection}
              rowKey='name'
              pagination={false}
            />
          </div>
        )
      }
    },
    {
      title: '宽度不足时',
      description: '宽度不足时自动调整最后一列拉满表格，设置::showUtils::为::true::即可显示工具栏。',
      state: {
        data: [{
          name: '王老爷子', remark: '每十个北京人就有一个是于谦的父亲，听相声的都是于谦的父亲', title: '武术家', age: 3
        }, {
          name: '冷面杀手', remark: '又称朝鲜冷面杀手', title: '武侠', age: 30
        }, {
          name: '爱新觉罗·筐', remark: '八大铁帽子王之世袭绿帽子王', title: '宦官之后', age: 88
        }, {
          name: '于鬻菊', remark: '遇到海盗被抢300万，之后让海盗开了500万的发票', title: '军事家', age: 43
        }, {
          name: '于德刚', remark: '家中排行第八人称北京八爷，简称京八', title: '北京八爷', age: 60
        }, {
          name: '朴人猛', remark: '陛下说谢谢', title: '韩国王子', age: 53
        }],
        selectedRowKeys: []
      },
      getMethod: context => {
        return {
          onSelectChange: selectedRowKeys => {
            context.setState({ selectedRowKeys });
          }
        }
      },
      getContent: context => {
        const { data, selectedRowKeys } = context.state;
        const columns = [{
          dataIndex: 'index', title: '序号', render: (text, record, index) => index + 1, width: 72
        }, {
          dataIndex: 'name', title: '姓名', width: 72
        }, {
          dataIndex: 'age', title: '年龄', sorter: (a, b) => a.age - b.age, width: 72
        }, {
          dataIndex: 'title', title: '职位', filterDropdown: <div>筛选菜单</div>, width: 72
        }];
        const rowSelection = {
          selectedRowKeys,
          onChange: context.onSelectChange,
        };
        return (
          <div style={{ paddingTop: 32 }}>
            <Table
              showUtils
              columns={columns}
              dataSource={data}
              expandedRowRender={record => <p>{record.remark}</p>}
              rowSelection={rowSelection}
              rowKey='name'
              pagination={false}
            />
          </div>
        )
      }
    }
  ]
}
